<template>
  <q-page class="cc-member row">
    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-table flat color="primary" class="cross_table" separator="cell" :columns="columns" :data="list" row-key="id"
        :pagination.sync="pagination" :visible-columns="group" @request="query"
        :rows-per-page-options="[10, 20, 50, 100]" :loading="loading" :selected.sync="selected">
        <template v-slot:top="table">
          <div class="row no-wrap full-width">
            <div class="q-pa-md">
              <q-input dense clearable outlined placeholder="请输入uid" @input="query" v-model="uid">
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-md">
              <q-input dense clearable outlined placeholder="请输入用户名搜索"  @input="query" v-model="username" >
                <template v-slot:prepend>
                  <q-icon name="mdi-account" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-md">
              <q-input dense clearable outlined placeholder="请输入手机号搜索" @input="query" v-model="mobile" >
                <template v-slot:prepend>
                  <q-icon name="phone" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <q-space />
            <div class="q-gutter-xs q-pa-md">
              <q-btn icon="add" no-wrap color="primary" label="新建" @click="add()" />
              <q-btn icon="mdi-restore" no-wrap color="primary" label="刷新" @click="refresh" />
            </div>
          </div>
        </template>
        <template #body-cell-status="props">
          <q-td key="status" :props="props">
            <div v-if="props.row.status==2">已审核</div>
            <div v-if="props.row.status==1">未审核</div>
          </q-td>
        </template>
        <template #body-cell-opt4="props">
          <q-td :props="props" :auto-width="true">
            <q-btn outline dense color="primary" style="width:100px;" @click="edit(props.row)"> 编辑员工 </q-btn>
            <q-btn outline dense color="primary" style="width:100px;" @click="detail_link(props.row)"> 员工详情 </q-btn>
            <q-btn outline dense color="red" style="width:100px;" @click="deleteRow(props.row)"> 删除 </q-btn>
          </q-td>
        </template>
      </q-table>
    </div>
    <q-dialog maximized flat ref="dialog">
      <q-form @submit="onSubmit" class="dialog_card column" style="min-width: 30vw" @reset="onReset">
        <h5 class="view_title justify-between q-px-md">
          {{ editType }}员工 <q-btn outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <q-scroll-area class="col">
          <div class="row hidden">
            <div class="col-md-12">
              <h5><q-icon name="star" color="red" />员工id：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.id" type="hidden" />
              </div>
            </div>
          </div>
          <div class="row hidden">
            <div class="col-md-12">
              <h5><q-icon name="star" color="red" />sid：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.sid" type="hidden" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5><q-icon name="star" color="red" />姓名：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense size="sm" outlined v-model="form.name" type="text" :rules="[requiredTest]" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5><q-icon name="star" color="red" />电话号码：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.mobile"  :rules="[requiredTest]" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5><q-icon name="star" color="red" />是否隐藏通讯录：</h5>
              <div class="q-col-gutter-x-sm">
                <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="is_hidden_tongxunlu" val="1" label="隐藏" />
                <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="is_hidden_tongxunlu" val="0" label="显示" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5><q-icon name="star" color="red" />所属公司：</h5>
              <div class="q-col-gutter-x-md">
                <q-select  v-model="shop_model" dense outlined :options="shopList"></q-select>
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>所属部门：</h5>
              <div class="q-col-gutter-x-md">
                <q-select  v-model="department_model" dense outlined :options="departmentList"></q-select>
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm"  style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>职位：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.job" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>微信：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.weixin" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>QQ：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.qq" />
              </div>
            </div>
          </div>

          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>邮箱：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.email" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>地址：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.address" />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm" style="padding: 0px 28px;">
            <div class="col-md-12">
              <h5>备注：</h5>
              <div class="q-col-gutter-x-sm">
                <q-input dense outlined v-model="form.remark"  />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-x-md dialog_form q-pa-sm">
            <div class="col-12">
              <div class="q-pa-sm" style="float: left;padding-left: 140px;">
                <q-btn class="no-border-radius" unelevated type="submit" :loading="loading" color="primary" label="保 存" size="md">
                  <template v-slot:loading>
                    <q-spinner-hourglass class="on-left" />保存...
                  </template>
                </q-btn>
              </div>
              <div class="q-pa-sm" style="float: left">
                <q-btn class="no-border-radius" unelevated v-close-popup type="button" outline style="color: goldenrod"  label="关闭" size="md"></q-btn>
              </div>
            </div>
          </div>
        </q-scroll-area>
      </q-form>
    </q-dialog>
  </q-page>
</template>

<script>
  import { IndexMixin } from "boot/mixins";
  import confirm from "components/confirm";
  import { requiredTest } from "boot/inputTest";
  import { date } from "quasar";
  const today = new Date();
  const { addToDate, subtractFromDate } = date;
  export default {
    name: "memberList",
    mixins: [IndexMixin],
    components: {
      confirm,
    },
    // props: ["status"],
    data() {
      return {
        columns: [
          { name: "uid", align: "center", label: "用户ID", field: "uid" },
          { name: "name",  align: "center", label: "姓名", field: "name", },
          { name: "mobile", align: "center", label: "手机号码", field: "mobile" },
          { name: "shop_name", align: "center", label: "所属公司", field: "shop_name" },
          { name: "department",  align: "center", label: "所属部门", field: "department", },
          { name: "create_time", align: "center", label: "操作时间", field: "create_time" },
          { name: "opt4", align: "center", label: "删除"  },
        ],
        loading: true,
        showQuery: true,
        headers: [{ name: "Authorization", value: localStorage.Authorization }],
        uploadUrl: `${process.env.BASE_URL}/sys/common/upload`,
        imgUrl: `${process.env.BASE_URL}/sys/common/static`,
        url: {
          list: '/shopmemberlist',
          add:  '/shopmemberadd',
          edit:  '/shopmemberupdate',
          detail:  '/shopmemberdetail',
        },
        form: {
          id: '',
          sid: 1,
          name: '',
          email: '',
          address: '',
          sort: 100,
          is_hidden_tongxunlu: '',
          company: '',
          qq: '',
          department: '',
          remark: '',
          weixin: '',
        },
        shopList: [],
        departmentList: [],
        is_hidden_tongxunlu: '1',
        shop_model: {},
        department_model: {label: '请选择', value: 0},
        isEdit: 0,
        uid: '',
        username: '',
        group_id: 0,
        group_model: { label: "全部" , value: -1},
        status: '',
        status_model: { label: "全部用户" , value: 0},
        companyOptions: [
          { label: "全部用户" , value: 0},
          { label: "已认证用户" , value: 2},
          { label: "未认证用户" , value: 1}
        ],
        userInfo: {
          id: '',
          name: '',
        },
        sid: '', // 企业id
      };
    },
    methods: {
      requiredTest,
      addBefore() {
        this.form.sid = this.userInfo.id
        return true;
      },
      selectCatalog(n) {
        this.catalog = n;
        this.query();
      },
      getTypeLabel(b) {
        if (b == 0) {
          return "隐藏";
        } else {
          return "显示";
        }
      },
      queryParam() {
        //组合查询参数
        if (this.mobile != '') {
          this.searchForm.mobile = this.mobile;
        }else{
          delete this.searchForm.mobile
        }
         if(this.username != ''){
          this.searchForm.name = this.username;
        }else{
          delete this.searchForm.name
        }
        console.log(this.username)
        if(this.status_model.value == 1){
          this.searchForm.status = 1
        }else if(this.status_model.value == 2){
          this.searchForm.status = 2
        }else{
          delete this.searchForm.status
        }
        if(this.uid && this.uid > 0){
          this.searchForm.uid = this.uid
        }else{
          delete this.searchForm.uid
        }
        this.searchForm.group_id = 0
        // this.searchForm.status = 1
      },
      checkPhoneNumber(phoneNumber) {
        // 定义一个正则表达式，匹配以1开头，后面跟10位数字的字符串
        var reg = /^1\d{10}$/;
        return reg.test(phoneNumber);
      },
      initDict() {
        const name = this.$route.query.name ?this.$route.query.name : ''
        this.username = name
        this.getShopList()
      },
      onSubmit(evt) {
        console.log(this.form);
        if (this.isEdit) {
          //this.form.attachments = this.file_list
        }
        let url = "";
        if (this.isEdit == 1) {
          url = this.url.edit;
        } else {
          url = this.url.add;
        }
        this.form.company = this.form.company.value
        this.$axios.post(url, this.form).then((r) => {
          this.babyWord = r;
          if (r.code == 0) {
            this.file_list = [];
            this.$q.notify({
              position: "top",
              color: "info",
              textColor: "white",
              icon: "cloud_done",
              group: false,
              html: true,
              message: "保存成功！！",
            });
            this.refresh();
            this.onReset();
            this.$refs.dialog.hide();
          } else {
            this.$q.notify({
              position: "top",
              color: "info",
              textColor: "white",
              icon: "cloud_done",
              group: false,
              html: true,
              message: "保存失败！！" + r.msg,
            });
          }
        });
        //evt.target.submit()
      },
      onReset() {
        this.form = {
          id: 0,
          member_name: "",
          password: "",
          email: true,
        };
      },
      refresh() {
        this.query()
      },
      onValueChange(val) {
        this.shop_model = val;
        console.log(this.shop_model)
        // this.searchForm.status = this.status_model.value;
        this.departmentList();
      },
      onGroupValueChange(val) {
        this.group_model = val;
        this.group_id = this.group_model.value
        if(this.group_id >= 0){
          this.searchForm.group_id = this.group_id
        }else{
          delete this.searchForm.group_id
        }
        this.query();
      },
      detail_link(row){
        this.$router.push({
          path: '/member/detail',
          query: { id: row.id }
        })
      },
      deleteRow(row) {
        const confirm_ = window.confirm('此操作将永久删除该人员, 是否继续?')
        if(confirm_) {
          this.$axios.post("/shopmemberdelete", {"ids": row.id, sid: this.sid}).then((r) => {
            this.$q.notify({
              position: 'top', color: 'success', textColor: 'blue', group: false, html: true, message: '删除成功！！',
            });
            this.refresh();
          });
        }
      },
      getShopList(){
        this.$axios.post("/shoplist", {}).then((r) => {
          r.data.forEach(el => {
            this.shopList.push({
              label: el.seller_name,
              value: el.id
            })
            this.shop_model = {
              label: el.seller_name,
              value: el.id
            }
          })
        });
      },
      getDepartmentList(id){
        this.$axios.post("/deptlist", {sid: id}).then((r) => {
          r.data.forEach(el => {
            this.departmentList.push({
              label: el.name,
              value: el.id
            })
            this.department_model = {
              label: el.name,
              value: el.id
            }
          })
        });
      },
    },
    created() {
      this.userInfo = JSON.parse(localStorage.userInfo)
      this.sid = this.userInfo.id
      console.log(this.userInfo)
      this.initDict();
    },
    watch: {
      shop_model:{
        handler(newVal, oldVal) {
          this.getDepartmentList(newVal.value)
        }
      }
    },
    mounted() {

    },
  };
</script>

<style>
.dialog_form >div {
  min-height: 75px;
}
</style>
